import React from 'react';

import router from '../../../utils/routerDecorator';
import {get, post, put, apiDelete} from '../../../logic/api';
import PageList from '../../components/PageList';

import { Popconfirm, Button } from 'antd';

import { observable, toJS } from 'mobx';

import styles from './main.less';
import { showModal } from "../../components/showModal";

import { Input, UploadImage } from '../../components/MobxForm';

class Edit extends React.Component {
  onConfirm = async () => {
    const { target, onConfirm, dismiss } = this.props;
    onConfirm && await onConfirm(target);
    dismiss();
  };

  render() {
    const { target, title, dismiss } = this.props;
    return (
      <div className={styles.edit}>
        <h2>{title}</h2>
        <Input target={target} field="link" label="链接" />
        <UploadImage target={target} field="image" label="图片" />
        <div className="ant-modal-footer">
          <Button onClick={dismiss}>取消</Button>
          <Button type="primary" onClick={this.onConfirm}>确定</Button>
        </div>
      </div>
    );
  }
}

@router('/site/swipers')
export default class List extends React.Component {
  async componentWillMount(){
  }

  async fetchData(current, pageSize, filters, sorter){
    return await get(`/admin/swiper/list?page=${current}&pageSize=${pageSize}`);
  }

  deleteItem = async (record) => {
    await apiDelete(`/admin/swiper/${record.id}`);
    const { list } = this.refs;
    if (list) {
      await list.fetchData();
    }
  }

  addItem = async (record) =>{
    try {
      await post('/admin/swiper/create', toJS(record));
      const {list} = this.refs;
      if (list) {
        await list.fetchData();
      }
    } catch (err) {
      alert('设置失败。请重试。');
    }
  };

  editItem = async ({id, image, link}) => {
    try {
      await put(`/admin/swiper/${id}`, {image, link});
      const {list} = this.refs;
      if (list) {
        await list.fetchData();
      }
    } catch (err) {
      alert('保存失败。请重试。');
      throw err;
    }
  };

  columns = [
    { title: 'ID', dataIndex: 'id'},
    { title:'图片', dataIndex:'image', width: '15%', render:(hash)=><img src={`http://oalpta27j.bkt.clouddn.com/${hash}`} style ={{width:50}} />},
    { title: '链接', dataIndex: 'link'},
    {
      title: (
        <div>
          <Button type="primary" onClick={()=>{
            showModal(<Edit
              title="新建"
              target={
                observable({
                  image: null,
                  imageUrl: null,
                  link: '',
                })
              }
              onConfirm={this.addItem}
            />);
          }}>新建</Button>
        </div>
      ),
      width:'25%',
      render: (text, record)=>(
        <div className = {styles.operations}>
          <Button type = "primary" onClick={() => {
            showModal(<Edit
              title="编辑"
              target={observable(record)}
              onConfirm={this.editItem}
            />);
          }}>
            编辑
          </Button>
          <Popconfirm title = "确定删除？" onConfirm={() => this.deleteItem(record)}>
            <Button type = "ghost">
              删除
            </Button>
          </Popconfirm>
        </div>
      ),
    },
  ];

  render(){
    return (
      <PageList
        ref="list"
        columns = {this.columns}
        fetchData = {this.fetchData}
      />
    );
  }
}
